<script lang="ts" setup>
import { computed, ref, reactive } from 'vue'
import Cardcover from '@/components/Cardcover.vue';
import Coervue from '@/components/Corevue.vue'
import api from '@/api/sort'
import { dataStore } from '@/stores/data'
const { homesort, colorRgb } = dataStore() as any
const cardcont = reactive([]) as any
const cardshow = ref(false)
const currentPage = ref(1) as any
const ds_id = ref() as any
const pageSize = ref(5) as any
const total = ref(0) as any
const Piechartshow = ref(false)

if (homesort.data.length === 0) {


	api.sortcount([]).then((res: any) => {
		for (let i = 0; i < res.data.data.length; i++) {
			if (res.data.data[i].ds_count === undefined) {
				res.data.data[i].ds_count = 0
			}
			res.data.data[i].name = res.data.data[i].ds_name
			res.data.data[i].value = res.data.data[i].ds_count
		}
		homesort.data = res.data.data
		Piechartshow.value = true

	}).catch(err => {
		console.log(err);

	})
} else {
	Piechartshow.value = true
}

const stag = (item: any) => {
	ds_id.value = item.ds_id
	api.sortdata({ page: 0, limit: 5, ds_id: item.ds_id }).then((res: any) => {
		cardshow.value = true
		cardcont[0] = res.data.data
		total.value = res.data.total[0].total
	}).catch(err => {
		console.log(err);

	})

}


const coverdata = (page: any, limit: any) => {
	page--
	api.sortdata({ page: page, limit: limit, ds_id: ds_id.value }).then((res: any) => {
		cardcont[0] = res.data.data
	}).catch(err => {
		console.log(err)
	})
}
const currentpage = (val: number) => {      //数据发生改变事件
	currentPage.value = val
	coverdata(val, 5)
}
const previouspage = (val: number, size: any) => {   //上一页事件
	currentPage.value--
}
const nextpage = (val: any, size: any) => {     //下一页事件
	currentPage.value++
}
</script>
<template>
	<div>
		<el-card class="box-card tag">
			<Coervue v-if="Piechartshow === true" />
			<div class="label">
				<el-space :size="30" v-for="(item, index) in homesort.data" :key="index">
					<el-button class="item" v-if="item.ds_count === 0" disabled checked :style="colorRgb()">{{ item.ds_name
					}}
					</el-button>
					<el-button class="item" v-else checked :style="colorRgb()" @click="stag(item)">{{ item.ds_name }}
						<el-space :size="0" v-if="item.ds_count !== 0">( {{ item.ds_count }} )</el-space>
					</el-button>
				</el-space>
			</div>
		</el-card>
		<div class="tag cardcont" v-if="cardshow === true">
			<div>
				<Cardcover :cardcont="cardcont" />
				<div class="pagination">
					<!-- <el-pagination ref="pagination" v-model:current-page="currentPage" v-model:page-size="pageSize"
		                         :small="small" :disabled="disabled"  background @prev-click="previouspage"  @next-click="nextpage"
		                            layout=" prev, pager, next, " :total="total"  @current-change="currentpage"
		                             /> -->
					<el-pagination layout="prev, pager, next" @current-change="currentpage" :page-size="pageSize"
						@prev-click="previouspage(currentPage, 5)" @next-click="nextpage(currentPage, 5)" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.tag {
	text-align: center;

	.label {
		margin: 80px auto;
		line-height: 3;

		.item {
			&:hover {
				background-color: var(--el-color-primary);
				color: #fff !important;
			}

		}
	}
}

.cardcont {
	margin-top: 20px;
}

.card {
	border: 1px solid var(--el-card-border-color);
	box-shadow: var(--el-box-shadow-light);
}

.dark {
	padding: 0;
}

:deep(.el-check-tag.is-checked) {
	background-color: var(--el-color-info-light-9);

	&:hover {
		background-color: var(--el-color-primary);
		color: #fff !important;
	}
}

.pagination {
	display: flex;
	justify-content: center;
	margin: 15px auto;
}
</style>
